<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">辽宁省房地产市场监测系统 —— 停缓建项目盘活情况</div>
      <!-- <div class="page-header-btns">
        <div>项目管理</div>
        <div @click="router.push({path: '/gisPage'})">切换地图</div>
      </div> -->
      <div class="back-home-btn" @click="router.go(-1)">返回首页</div>
    </div>
    <div class="main-content">
      <el-row :gutter="30">
        <el-col :span="8">
          <div class="module-item project-overview">
            <div class="module-item-title">
              <span>停缓建项目概况</span>
            </div>
            <div class="module-item-content">
              <el-row :gutter="30" justify="space-evenly">
                <el-col :span="12">
                  <div class="project-overview-item">
                    <span>项目数</span>
                    <span style="color: #60F9F4;">{{ projectOverviewObj.xmzs || '--' }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="project-overview-item">
                    <span>盘活率</span>
                    <span style="color: #60F9F4;">{{ projectOverviewObj.phl }}%</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="30" justify="space-evenly">
                <el-col :span="12">
                  <div class="project-overview-item">
                    <span>已盘活及有效处置</span>
                    <span style="color: #FADA4C;">{{ projectOverviewObj.yphxm }}</span>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="project-overview-item">
                    <span>未盘活</span>
                    <span style="color: #FADA4C;">{{ projectOverviewObj.wphxm }}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="module-item every-city-vitalize-number-ranking">
            <div class="module-item-title">
              <span>各城市盘活个数排名</span>
            </div>
            <div class="module-item-content">
              <el-row class="table-head">
                <el-col :span="2">排名</el-col>
                <el-col :span="4">城市</el-col>
                <el-col :span="14"></el-col>
                <el-col :span="4">盘活个数</el-col>
              </el-row>
              <div class="table-content">
                <vue3-seamless-scroll :list="everyCityVitalizeNumberRankingList" direction="up" :hover="true"
                                      :limitScrollNum="1" :step="step" wheel :copyNum="0"
                                      class="seamless-wrap">
                  <div v-for="(item, index) in everyCityVitalizeNumberRankingList" :key="index">
                    <el-row>
                      <el-col :span="2">{{ index + 1 }}</el-col>
                      <el-col :span="4">{{ item.city }}</el-col>
                      <el-col :span="14">
                        <div class="bar">
                          <div class="bar-item"
                               :style="{ width: `${(item.count / everyCityVitalizeNumberRankingMax) * 100}%` }"></div>
                        </div>
                      </el-col>
                      <el-col :span="4">{{ item.count }}</el-col>
                    </el-row>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
          <div class="module-item every-city-vitalize-rate-ranking">
            <div class="module-item-title">
              <span>各城市盘活率排名</span>
            </div>
            <div class="module-item-content">
              <el-row class="table-head">
                <el-col :span="2">排名</el-col>
                <el-col :span="4">城市</el-col>
                <el-col :span="14"></el-col>
                <el-col :span="4">盘活率</el-col>
              </el-row>
              <div class="table-content">
                <vue3-seamless-scroll :list="everyCityVitalizeRateRankingList" direction="up" :hover="true"
                                      :limitScrollNum="1" :step="step" wheel :copyNum="0"
                                      class="seamless-wrap">
                  <div v-for="(item, index) in everyCityVitalizeRateRankingList" :key="index">
                    <el-row>
                      <el-col :span="2">{{ index + 1 }}</el-col>
                      <el-col :span="4">{{ item.city }}</el-col>
                      <el-col :span="14">
                        <div class="bar">
                          <div class="bar-item"
                               :style="{ width: `${item.count}%` }"></div>
                        </div>
                      </el-col>
                      <el-col :span="4">{{ item.count }}%</el-col>
                    </el-row>
                  </div>
                </vue3-seamless-scroll>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <el-row ref="viewerContainer" class="demo-viewer map">
            <vc-viewer :logo="false" @ready="vcViewerReady">
              <vc-overlay-html
                v-for="(item, index) in pointList"
                :key="index"
                :position="{ lng: item.x, lat: item.y }"
                :style="{ 'pointer-events': pointerEvents }"
                @wheel="handleWheel"
              >
                <div class="point-item">
                  <el-image style="width: 36px; height: 36px"
                            :src="item.isChoose ? locationChosen : pointImgUrlFunc(item)" :fit="fit"/>
                </div>
              </vc-overlay-html>
            </vc-viewer>
            <div class="map-back-origin" @click="mapBackOrigin">回到初始状态</div>
          </el-row>
          <div class="module-item stopped-suspended-project-standing-book">
            <div class="module-item-title">
              <span>停缓建项目台账</span>
            </div>
            <div class="module-item-content">
              <div class="top-filtrate-content">
                <div class="top-filtrate-content-select">
                  <div class="project-nature">
                    <span>项目性质</span>
                    <el-select class="top-filtrate-content-select-item"
                               v-model="stoppedSuspendedProjectStandingBookProjectNature"
                               size="small"
                               @change="changeStoppedSuspendedProjectStandingBookProjectNatureSelect">
                      <el-option
                        v-for="item in stoppedSuspendedProjectStandingBookProjectNatureSelectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="custom-select-option"
                      />
                    </el-select>
                  </div>
                  <div class="vitalize-status">
                    <span>盘活状态</span>
                    <el-select
                      class="top-filtrate-content-select-item vitalize-status-select"
                      v-model="stoppedSuspendedProjectStandingBookVitalizeStatus"
                      multiple
                      collapse-tags
                      collapse-tags-tooltip
                      size="small"
                      placeholder="请选择"
                      @change="changeStoppedSuspendedProjectStandingBookVitalizeStatusSelect"
                    >
                      <el-option
                        v-for="item in stoppedSuspendedProjectStandingBookVitalizeStatusSelectList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="custom-select-option"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="top-filtrate-content-info">
                  <span>项目总数：<span style="color: #60F9F4">{{ tableInfo.projectSumNum }}</span></span>
                  <span>面积：<span style="color: #5ABE52">{{ tableInfo.acreage }}万㎡</span></span>
                  <span>套数：<span style="color: #FADA4C">{{ tableInfo.houseNum }}</span></span>
                </div>
                <div class="city-project-filtrate">
                  <public-change-province-city
                    :cityList="provinceCitySelectList"
                    :currentCity="provinceCitySelectValue.code"
                    @changeCity="changeCity"
                  />
                  <el-input class="city-project-filtrate-project-name" v-model="projectName"
                            placeholder="请输入项目名称" size="small" clearable/>
                  <div class="city-project-filtrate-btn" @click="searchProject">搜索</div>
                </div>
              </div>
              <div class="module-item-content-table">
                <table-list :tableData="tableListData" :tablePaginationInfo="tableInfo" @tableRowClick="tableRowClick"
                            :columnData="tableColumnData" @changePageNum="changeTablePage"
                            @cameraFlyTo="prepareForCameraFly"
                ></table-list>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {computed, onMounted, onUnmounted, ref, shallowRef} from "vue";
import {useRouter} from "vue-router";
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import tableList from "@/components/guaranteeDeliveryHouseCondition/tableList.vue";
import {
  constructionGetThjProject, // 停缓建项目盘活情况-停缓建项目概况
  constructionGetThjProjectRanking, // 停缓建项目盘活情况-各城市盘活个数排名
  constructionGetThjProjectRate, // 停缓建项目盘活情况-各城市盘活率排名
  constructionGetThjProjectTz, // 停缓建项目盘活情况-停缓建项目台账
  constructionGetThjProjectLocation, // 停缓建项目盘活情况-获取停缓建项目经纬度
} from '@/api/stoppedSuspendedProjectVitalizeCondition/index'
import locationRed from "@/assets/img/guaranteeDeliveryHouseCondition/locationRed.png";
import locationYellow from "@/assets/img/guaranteeDeliveryHouseCondition/locationYellow.png";
import locationGreen from "@/assets/img/guaranteeDeliveryHouseCondition/locationGreen.png";
import locationChosen from '@/assets/img/guaranteeDeliveryHouseCondition/locationChosen.png'

const router = useRouter();

const projectOverviewObj = ref({}) // 项目概括

const VCCesium = shallowRef(null); // 原生cesium实例
const VCViewer = shallowRef(null); // vue-cesium-viewer实例
const scrollTimer = ref(null);
const pointerEvents = ref("auto");

const pointList = ref([]) // 点list
const everyCityVitalizeNumberRankingList = ref([]) // 各城市盘活个数排名list
const everyCityVitalizeRateRankingList = ref([]) // 各城市盘活率排名list
const step = ref('0')
const stoppedSuspendedProjectStandingBookVitalizeStatus = ref(['已盘活', '未盘活', '有效处置']) // 停缓建项目台账盘活状态select-value
const stoppedSuspendedProjectStandingBookVitalizeStatusSelectList = [ // 停缓建项目台账盘活状态select-list
  {
    label: '已盘活',
    value: '已盘活'
  },
  {
    label: '未盘活',
    value: '未盘活'
  },
  {
    label: '有效处置',
    value: '有效处置'
  }
]
const stoppedSuspendedProjectStandingBookProjectNature = ref('商品') // 停缓建项目台账项目性质select-value
const stoppedSuspendedProjectStandingBookProjectNatureSelectList = [ // 停缓建项目台账项目性质select-list
  {
    label: '商品',
    value: '商品'
  },
  {
    label: '住宅',
    value: '住宅'
  }
]
const provinceCitySelectValue = ref({
  name: '',
  code: '210000'
})
const provinceCitySelectList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'}
])
const projectName = ref('') // 停缓建项目台账-项目名称搜素
const tableListData = ref([]) // 列表tablelist
const tableColumnData = ref([]) // 列表columnlist
const tableInfo = ref({ // 列表-分页-table信息
  total: 0,
  pageNum: 1,
  pageSize: 7,
  projectSumNum: '',
  acreage: '',
  houseNum: '',
})

const handleScroll = (timer, pointerEvents, timeout) => { // 滚动样式设置
  if (timer.value) {
    clearTimeout(timer.value);
  }
  pointerEvents.value = "none";
  timer.value = setTimeout(() => {
    pointerEvents.value = "auto";
  }, timeout);
};

const handleWheel = () => {
  handleScroll(scrollTimer, pointerEvents, 800);
};

const vcViewerReady = ({Cesium, viewer}) => { // gis初始化
  VCCesium.value = Cesium;
  VCViewer.value = viewer;
  // 去除水印
  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(123.4, 41.8, 70 * 10000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 70 * 10000;
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0;
  viewer.scene.screenSpaceCameraController.enableTilt = false; // 禁止地图倾斜（旋转）功能
  //  加载离线地图
  viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      // url: "http://192.168.30.225:8088/mapsatellite/{z}/{x}/{y}.jpg", //卫星地图
      url: "http://192.168.30.225:8088/map/{z}/{x}/{y}.png", //二维地图
      fileExtension: "png",
    })
  );
}

const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  step.value = viewportHeight * 0.0003;
};

const changeStoppedSuspendedProjectStandingBookVitalizeStatusSelect = (value) => { // 盘活状态select切换
  tableInfo.value.pageNum = 1
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const changeStoppedSuspendedProjectStandingBookProjectNatureSelect = (value) => { // 项目性质select切换
  tableInfo.value.pageNum = 1
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const changeCity = (cityCode) => { // 模块切换城市
  provinceCitySelectValue.value.code = cityCode
  tableInfo.value.pageNum = 1
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const changeTablePage = (page) => { // 列表-切换
  tableInfo.value.pageNum = page
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const initTableList = (pageInfo) => { // table
  tableColumnData.value = [
    {
      label: '序号',
      key: 'index',
      width: 40
    },
    {
      label: '城市',
      key: 'cityName',
      width: 55
    },
    {
      label: '项目名称',
      key: 'xmmc',
      width: 80
    },
    {
      label: '所在县区',
      key: 'xzqhmc',
      width: 40
    },
    {
      label: '项目基本情况',
      key: 'xmjbqk',
      width: 200
    },
    {
      label: '停缓建原因',
      key: 'thjyy',
      width: 50
    },
    {
      label: '需要解决的具体问题',
      key: 'xyjjjtwt',
      width: 120
    },
    {
      label: '研究制定的解决措施及进展情况',
      key: 'jjcsjzqk',
      width: 150
    },
    {
      label: '涉及民生或信访情况',
      key: 'sjmsxfqk',
      width: 60
    },
    {
      label: '盘活处置情况',
      key: 'phczqk',
      width: 60
    },
    {
      label: '合同约定交付时间',
      key: 'htydjfsj',
      width: 80
    },
    {
      label: '涉法涉诉情况',
      key: 'sfssqk',
      width: 60
    },
    {
      label: '包保领导',
      key: 'bbld',
      width: 'auto'
    },
    {
      label: '责任单位/责任人',
      key: 'zrdwzrr',
      width: 80
    },
    {
      label: '停工时间',
      key: 'tgsj',
      width: 80
    },
  ]
  constructionGetThjProjectTz({
    xzqhdm: provinceCitySelectValue.value.code,
    phType: stoppedSuspendedProjectStandingBookVitalizeStatus.value,
    pageSize: pageInfo.pageSize,
    pageNum: pageInfo.pageNum,
    projectName: projectName.value || ''
  }).then(res => {
    if (res && res.data) {
      const resData = res.data
      tableInfo.value.projectSumNum = resData.xmzs
      tableInfo.value.acreage = resData.mj
      tableInfo.value.houseNum = resData.ts
      tableListData.value = resData.list?.map((x, i) => {
        return {
          ...x,
          index: (pageInfo.pageNum - 1) * pageInfo.pageSize + (i + 1)
        }
      })
      tableInfo.value.total = resData.total
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
  })
}

const getProjectOverview = () => { // 项目概括-getdata
  constructionGetThjProject().then(res => {
    if (res && res.data) {
      const resData = res.data
      projectOverviewObj.value = resData
    }
  }).catch(err => {
    console.log(err);
  })
}

const getEveryCityVitalizeNumberRankingList = () => { // 各城市盘活个数排名-getdata
  constructionGetThjProjectRanking().then(res => {
    if (res && res.data) {
      const resData = res.data
      everyCityVitalizeNumberRankingList.value = resData
    }
  }).catch(err => {
    console.log(err);
  })
}

const everyCityVitalizeNumberRankingMax = computed(() => { // 各城市盘活个数排名-value最大值
  const tempValueList = everyCityVitalizeNumberRankingList.value.map(x => x.count)
  return Math.max(...tempValueList)
})

const getEveryCityVitalizeRateRankingList = () => { // 各城市盘活率排名-getdata
  constructionGetThjProjectRate().then(res => {
    if (res && res.data) {
      const resData = res.data
      everyCityVitalizeRateRankingList.value = resData
    }
  }).catch(err => {
    console.log(err);
  })
}

const searchProject = () => { // 搜索项目
  tableInfo.value.pageNum = 1
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
}

const tableRowClick = (row) => { // 行点击
  tableListData.value.forEach(x => {
    x.isChoose = false
  })
  row.isChoose = true
  pointList.value.forEach(x => {
    x.isChoose = false
  })
  const choosePoint = pointList.value.find(x => x.id === row.id)
  if (choosePoint) choosePoint.isChoose = true
}

const prepareForCameraFly = (row) => { // 准备相机飞跃
  cameraFlyTo([row.jd, row.wd], 2 * 10000);
}

const cameraFlyTo = (coord, height) => {
  VCViewer.value.camera.flyTo({
    destination: VCCesium.value.Cartesian3.fromDegrees(coord[0], coord[1], height),
    orientation: {
      heading: VCCesium.value.Math.toRadians(0),
      pitch: VCCesium.value.Math.toRadians(-90),
      roll: 0.0,
    },
    duration: 0.5, // 飞行动画的持续时间，单位为秒
  });
};

const pointImgUrlFunc = (item) => { // 地图图标方法
  switch (item.phczqk) {
    case '未盘活':
      return locationRed
    case '已盘活':
      return locationGreen
    case '有效处置':
      return locationYellow
  }
}

const mapBackOrigin = () => { // 地图回到初始状态
  tableListData.value.forEach(x => {
    x.isChoose = false
  })
  pointList.value.forEach(x => {
    x.isChoose = false
  })
  cameraFlyTo([123.4, 41.8], 70 * 10000);
}

const getMapPoints = (row) => { // 获取地图点位
  constructionGetThjProjectLocation().then(res => {
    if (res && res.data) {
      const resData = res.data
      const tempList = resData.filter(x => x.jd && x.wd && x.phczqk)
      pointList.value = tempList.map(x => {
        return {
          ...x,
          x: x.jd,
          y: x.wd,
          isChoose: false
        }
      })
    }
  }).catch(err => {
    console.log(err);
  })
}

const initPage = () => {
  getProjectOverview() // 项目概括
  getEveryCityVitalizeNumberRankingList() // 各城市盘活个数排名
  getEveryCityVitalizeRateRankingList() // 各城市盘活率排名
  initTableList({pageNum: tableInfo.value.pageNum, pageSize: tableInfo.value.pageSize});
  getMapPoints();
}

onMounted(() => {
  calculateStep();
  window.addEventListener("resize", calculateStep);

  initPage();
});
onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
});
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 30px;
      color: #A6EDFF;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    &-btns {
      position: absolute;
      top: 50px;
      right: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: white;
      cursor: pointer;

      div {
        width: 100px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0E81FF;
        border-radius: 5px;
      }

      div:not(:last-child) {
        margin-right: 10px;
      }
    }

    .back-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;

    .point-item {
    }

    .module-item {
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
      }
    }

    .project-overview {
      height: 230px;
      margin-bottom: 20px;

      .module-item-content {
        padding: 30px;

        .el-row:not(:last-child) {
          margin-bottom: 10px;
        }
      }

      &-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 70px;
        background-image: url("@/assets/img/guaranteeDeliveryHouseCondition/module-bg-new.png");
        background-size: 100% 100%;

        span:first-child {
          font-size: 16px;
        }

        span:last-child {
          font-size: 23px;
          font-weight: bolder;
        }
      }
    }

    .every-city-vitalize-number-ranking, .every-city-vitalize-rate-ranking {
      height: 343px;
      overflow: hidden;
      margin-bottom: 20px;

      .module-item-title {
        position: relative;
      }

      .module-item-content {
        height: 323px;
        padding-bottom: 10px;

        .table-head {
          height: 15%;
          font-size: 16px;
          padding: 10px 0;

          .el-col:nth-of-type(1) {
            padding-left: 10px;
          }

          .el-col:nth-of-type(2) {
            padding-left: 5px;
          }
        }

        .table-content {
          height: 85%;
          font-size: 15px;

          .el-col:nth-of-type(1) {
            text-align: center;
          }

          .el-col {
            margin-bottom: 10px;
          }

          .seamless-wrap {
            height: 100%;
            overflow: hidden;

            > div > div > div:first-child {
              padding-top: 20px;
            }

            > div > div > div:last-child {
              padding-bottom: 20px;
            }
          }

          .table-loading {
            /deep/ .el-loading-mask {
              background-color: transparent;
            }
          }

          .bar {
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            width: 85%;
            height: 14px;
            margin-left: 0px;

            .bar-item {
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              background: linear-gradient(90deg, #27F8FC 0%, #0271BC 100%);
            }
          }
        }
      }
    }

    .every-city-vitalize-rate-ranking {
      margin-bottom: 0;
    }

    .map {
      height: 622px;
      overflow: hidden;

      .map-back-origin {
        position: absolute;
        right: 5px;
        bottom: 5px;
        font-size: 16px;
        color: white;
        height: auto;
        padding: 5px 10px;
        border-radius: 5px;
        background: #204485;
        box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
        border: 0.00521rem solid #67BAEF;
        cursor: pointer;
        z-index: 2;
      }
    }

    .stopped-suspended-project-standing-book {
      position: relative;
      margin-top: 20px;
      height: 315px;

      .module-item-content {
        padding-top: 10px;
        height: 295px;

        .top-filtrate-content {
          display: flex;
          align-items: center;
          padding: 10px 0;

          &-select {
            position: absolute;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            > div {
              display: flex;
              align-items: center;
              justify-content: center;

              > span {
                font-size: 16px;
                white-space: nowrap;
                margin-right: 10px;
              }
            }

            /deep/ .el-select__wrapper {
              background: #204485;
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border: 1px solid #67BAEF;
              font-size: 15px;

              .el-select__selected-item {
                color: white;
              }
            }

            .project-nature {
              width: 160px;
            }

            .vitalize-status {
              margin-left: 10px;

              &-select {
                /deep/ .el-select__wrapper {
                  width: 155px;
                }
              }
            }

            /deep/ .el-select__wrapper.is-hovering {
              box-shadow: inset 0px 0px 8px 0px #3D7FFF;
              border: 1px solid #67BAEF;
            }
          }

          &-info {
            position: absolute;
            left: 40%;
            font-size: 16px;
            background-color: #00FDFF33;
            padding: 2px 10px;

            span {
              font-weight: bolder;
            }

            span:not(:last-child) {
              margin-right: 10px;
            }
          }

          .city-project-filtrate {
            position: absolute;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            .filtrate-city {
              min-width: 100px;
              width: 100px;
              margin-right: 10px;

              /deep/ .el-select__wrapper {
                font-size: 15px;
              }
            }

            &-project-name {
              width: 140px;

              /deep/ .el-input__wrapper {
                background: #204485;
                box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
                border: 0.00521rem solid #67BAEF;

                .el-input__inner {
                  color: white;
                  font-size: 14px;
                }

                .el-range-input, .el-range-separator {
                  color: white;
                }

                input::placeholder {
                  color: #D7DDE2 !important;
                }
              }
            }

            &-btn {
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              margin-left: 10px;
              background: #204485;
              width: 44px;
              height: 26px;
              border-radius: 5px;
              cursor: pointer;
              box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
              border: 0.00521rem solid #67BAEF;
            }
          }
        }

        &-table {
          width: 100%;
          height: 245px;
          padding: 10px 3px;

          /deep/ .table-row {
            height: 38px;
          }

          /deep/ .el-table__empty-block {
            height: 200px !important;
          }
        }
      }
    }
  }
}

.custom-select-option {
  color: #ffffff;
}

.custom-select-option.is-selected {
  color: #00e0ff;
}

.custom-select-option:hover {
  background: #368CF2;
}
</style>